<%= turbo_frame_tag "service/#{service.id}/domains" do %>
  <div>
    <h4 class="text-lg font-bold mb-2">Custom Domains</h4>
    <div>
      <%= form_with(
        model: [service.project, service, Domain.new],
        url: project_service_domains_path(service.project, service),
        class: "flex gap-2 lg:max-w-xl"
      ) do |form| %>
        <div class="flex-grow">
          <%= form.text_field :domain_name, class: "input input-bordered w-full", placeholder: "Domain Name", required: true %>
        </div>
        <%= form.submit "Add Domain", class: "btn btn-primary", data: { disable_with: "Loading..." } %>
      <% end %>
    </div>

    <h5 class="my-4">Make sure to configure domains with the following DNS records</h5>
    <% if service.domains.any? %>
      <%= render(
        "shared/partials/async_renderer",
        view_model: Async::K8::CertificateStatusViewModel.new(
          current_user,
          service_id: service.id
        )
      ) %>
    <% end %>
    <div id="domain-list" class="overflow-x-auto">
      <%= render partial: "projects/services/domains/list", locals: { service: } %>
    </div>
    <div class="flex items-center mt-4">
      <%= button_to "Refresh DNS Status", check_dns_project_service_domains_path(service.project, service), class: "btn btn-primary btn-sm btn-outline", data: { disable_with: "Loading..." } %>
      <% if defined?(refreshed) %>
        <span class="text-success ml-4">DNS records refreshed <iconify-icon icon="lucide:check"></iconify-icon></span>
      <% end %>
    </div>
  </div>
<% end %>